<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="ot" uri="http://www.ideyatech.com/tides"%>
<%@ taglib prefix="idy" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>

<idy:bs-iris-header title_webpage="title.admin.staff">
</idy:bs-iris-header>

<div class="page-body">
	<div class="admin-search-box">
		<div class="form-box-title"><h4><spring:message code="label.admin.staff.search"/></h4></div>
		<form:form id="staffSearchForm" commandName="staff" action="${url_context}/staffs.jspx" cssClass="form-horizontal">
			<div class="control-group">
				<form:label path="lastName" cssClass="control-label"><spring:message code="label.admin.staff.lastName" /> :</form:label>
				<div class="controls">
					<form:input path="lastName" maxlength="50" autocomplete="off"/>
				</div>
			</div>
			
			<div class="control-group">
				<form:label path="firstName" cssClass="control-label"><spring:message code="label.admin.staff.firstName" /> :</form:label>
				<div class="controls">
					<form:input path="firstName" maxlength="50" autocomplete="off"/>
				</div>
			</div>
			
			<div class="control-group">
				<label class="control-label"><spring:message code="label.staff.postion"/> :</label>
				<div class="controls">
					<form:select path="position">
						<form:option value="">--Select One--</form:option>
						<form:options items="${staffs}" itemLabel="value" itemValue="id"/>
					</form:select>
				</div>
			</div>
			
			<div class="control-group">
				<label class="control-label"><spring:message code="label.staff.gender"/></label>
				<div class="controls">
					<c:forEach items="${genders}" var="gender">
						<label class="radio inline">
							<input type="radio" class="optionsRadios" name="gender" value="${gender.id}" <c:if test='${staff.gender.id eq gender.id}'>checked="checked"</c:if>/>
							${gender.value}
						</label>
					</c:forEach>
				</div>
			</div>
			
			<div class="control-group">
				<div class="controls">
					<input type="submit" class="btn btn-primary" name="Submit_" value="<spring:message code="label.submit" />" />
                	<input type="button" class="btn" name="clear" value="Clear" id="search-clear"/>
				</div>
			</div>
			
			<ot:sort_input searchFormId="staffSearchForm"/>
		</form:form>
	</div>

	<div id="staff-row-new"></div>
	
	<div class="pull-right">
		<ot:paging results="${results}" baseURL="${url_context}/staffs.jspx" pageParamName="page" displaySummary="true" displayPageLinks="false" searchFormId="staffSearchForm"/>
	</div>
	<ot:add_button page="staffs.jspx" prefix="staff"/>
	
	<table class="table table-striped table-condensed table-bordered">
    	<thead>
        	<tr>
           		<th>
           			<ot:header_sort headerField="lastName" headerLabel="label.admin.staff.lastName" prefix="${staff}" searchFormId="staffSearchForm" />
           		</th>
           		<th>
           			<ot:header_sort headerField="firstName" headerLabel="label.admin.staff.firstName" prefix="${staff}" searchFormId="staffSearchForm" />
           		</th>
           		<th>
           			<ot:header_sort headerField="middleName" headerLabel="label.admin.staff.middleName" prefix="${staff}" searchFormId="staffSearchForm" />
           		</th>
           		<th>
           			Birth Date
           		</th>
           		<th>
           			Gender
           		</th>
           		<th>
           			<ot:header_sort headerField="position" headerLabel="label.admin.staff.position" prefix="${staff}" searchFormId="staffSearchForm" />
           		</th>
           		<th></th>
           	</tr>
		</thead>
        <tbody id="staff-table-results">
	    	<c:forEach items="${results.results}" var="record" varStatus="status">
	        	<tr id="staff-row-${record.id}">
	           		<td>
	           			<c:out value="${record.lastName}" />
	           		</td>
	           		<td>
	           			<c:out value="${record.firstName}" />
	           		</td>
	           		<td>
	           			<c:out value="${record.middleName}" />
	           		</td>
	           		<td>
	           			<fmt:formatDate value='${record.birthdate}' pattern="MMMM dd yyyy"/>
	           		</td>
	           		<td>
	           			<c:out value="${record.gender.value}" />
	           		</td>
	           		<td>
	           			<c:out value="${record.position.value}" />
	           		</td>
	               	<td>
						<ot:update_button id="${record.id}" page="staffs.jspx" prefix="staff"/>                  		
	               	</td>	
	           	</tr>
			</c:forEach>
		</tbody>
	</table>
	<div style="text-align: center;">
    	<ot:paging results="${results}" baseURL="${url_context}/staffs.jspx" pageParamName="page" displaySummary="false" displayPageLinks="true" searchFormId="staffSearchForm"/>
    </div>
</div>

<idy:bs-iris-footer>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#search-clear').click(function(){
				IRIS.htmlUtil.clearSearchPane('staffSearchForm');
			});
		});
	</script>
</idy:bs-iris-footer>